<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="accountStatement-filterItem">
    <div class="page page accountStatement-list padding-safe-area-bottom">
      <div class="scroll-view">
        <customHeader :middleTitle="param.shopName||''" @leftCallBack="popupHide"></customHeader>
        <div class="page-body">
          <div class="date-text mb20">
            <span>{{moment(param.startDate).format('YYYY-MM-DD')}} 至 {{moment(param.endDate-1000).format('YYYY-MM-DD')}}</span>
          </div>
          <div class="overview-header" @click="linkToDetail(overviewData, true)">
            <div class="tc">结算合计(元)<i class="zhk-list_rarrow"></i></div>
            <div class="overview-header_total tc">
              <span class="fh">¥</span>
              <span>{{CommonUtil.moneyFormate(overviewData.actualTotalAmount)}}</span>
            </div>
            <div class="overview-header_flex">
              <div class="overview-header_flex-item">
                  <p>收款笔数</p>
                  <p>
                    <span>{{overviewData.tradeNumber || 0}}</span>
                  </p>
                </div>
                <div class="overview-header_flex-item">
                  <p>退款笔数</p>
                  <p>
                    <span>{{overviewData.refundsNumber || 0}}</span>
                  </p>
                </div>
            </div>
          </div>
          <div v-if="overViewList&&overViewList.length">
            <p class="list-title">按日查看</p>
            <ul class="date-list">
              <li class="total" v-for="(item,index) in overViewList" :key="index"  @click="linkToDetail(item)">
                    <span class="title">{{item.bizDate}}</span>
                    <div>
                      <span class="amount">{{CommonUtil.moneyFormate(item.actualTotalAmount)}}</span>
                      <div class="bs">收款{{item.tradeNumber}}笔 退款{{item.refundsNumber}}笔</div>
                    </div>
                    <i class="zhk-list_rarrow"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";
import { Toast } from "mint-ui";
import moment from "moment";

export default {
  name: "mdAccount",
  props: {
    param: {
      type: Object
    },
    overviewData: {
      type: Object,
      default: {}
    }
  },
  components: {
    customHeader,
    noData
  },
  data() {
    return {
      CommonUtil:CommonUtil,
      moment: moment,
      popupVisible: false,
      overViewList: null,
      expand: false
    };
  },
  watch: {
    popupVisible(newV, oldV) {
      if(newV) {
        this.loadData();
      }
    }
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
      this.overViewList = null;
    },
    loadData() {
      let _param = Object.assign({}, this.param);
      delete _param.shopName;
      this.getListByDay(_param);
    },
    //对账单按日查看
    getListByDay(params) {
      if(this.overviewData.reginId) {
        params.regionId = this.overviewData.reginId;
      }
      this.ajax({
        url: "/newapp/reconciliation/overViewNew.do",
        type: "post",
        data: params
      }).then(res => {
        if(res.success && res.resultObject) {
          let list = res.resultObject.summaryBizDateList || [];
          list.forEach(item=> {
            item.bizDate = (item.bizDate+'').replace(/([\d]{4})([\d]{2})(\d*)/,'$1-$2-$3');
            item.startDate = moment(item.bizDate).valueOf();
            item.endDate = moment(item.bizDate).add(1, 'd').valueOf();
          });
          this.overViewList = list;
        }else {
          Toast(res.msg)
        }
      }).catch(err=> {

      })
    },
    linkToDetail(item, flag) {
      let params = Object.assign({}, this.param);
      if(item.startDate && params.endDate) {
        params.startDate = item.startDate;
        params.endDate = item.endDate;
      }
      this.$emit('linkToDetail', params, item, flag);
    }
  }
};
</script>

<style lang='scss' scoped>
@import "accountStatement";
.mb20 {
  @include remCalc(margin-bottom, 20);
}
</style>